<template>
    <div>
        <headers />

        <div class="container">
            <main-nav />
            <el-row :gutter="30">
                <el-col :span="16">
                    <el-card>
                        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ name: 'products' }">全部装备</el-breadcrumb-item>
                            <el-breadcrumb-item>装备详情</el-breadcrumb-item>
                        </el-breadcrumb>
                        <el-row :gutter="15">
                            <el-col :span="9">
                                <carousel :goodsInfo="goodsInfo" />
                            </el-col>
                            <el-col :span="15">
                                <info :goodsInfo="goodsInfo" />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <periphery title="周边商品" />
                </el-col>
            </el-row>

            <recommend title="推荐商品" />

            <el-row :gutter="30" class="mt-30 mb-30">
                <el-col :span="20">
                    <el-card>
                        <div class="mb-30">
                            <el-button v-for="btn in btns" :key="btn.id" :type="btn.id === activeBtnId ? 'danger' : ''"
                                @click="activeBtnId = btn.id">{{
                                btn.name }}</el-button>
                        </div>
                        <div v-show="activeBtnId === 0">
                            <baseInfo :goodsInfo="goodsInfo" title="基本信息" />
                        </div>
                        <div v-show="activeBtnId === 1">
                            <parameter :goodsInfo="goodsInfo" title="参数规格" />
                        </div>
                        <div v-show="activeBtnId === 2">
                            <display :goodsInfo="goodsInfo" title="装备展示" />
                        </div>
                        <div v-show="activeBtnId === 3">
                            <sales title="销售记录" />
                        </div>
                        <div v-show="activeBtnId === 4">
                            <evaluate title="装备评价" />
                        </div>
                        <div v-show="activeBtnId === 5">
                            <teachingCenter title="教学中心" />
                        </div>
                        <div v-show="activeBtnId === 6">
                            <bbs title="产品论坛" />
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="4">
                    <recProd :goods_id="$route.params.id" title="同类型产品推荐" />
                </el-col>
            </el-row>
        </div>
        <footers />
        <comparison />
    </div>
</template>

<script>
import headers from "@/components/header.vue"
import footers from "@/components/footer.vue"
import mainNav from "@/components/mainNav.vue"
import comparison from "@/components/comparison.vue"

import periphery from "./components/periphery.vue"
import carousel from "./components/carousel.vue"
import recommend from "./components/recommend.vue"
import info from "./components/info.vue"
import recProd from "./components/recProd.vue"
import baseInfo from "./components/baseInfo.vue"
import parameter from "./components/parameter.vue"
import display from "./components/display.vue"
import sales from "./components/sales.vue"
import evaluate from "./components/evaluate.vue"
import teachingCenter from "./components/teachingCenter.vue"
import bbs from "./components/bbs.vue"


import { getGoodsInfo } from "@/api/apis"

export default {
    name: "Procucts",
    components: {
        headers,
        footers,
        mainNav,
        comparison,
        periphery,
        recommend,
        carousel,
        info,
        recProd,
        baseInfo,
        parameter,
        display,
        sales,
        evaluate,
        teachingCenter,
        bbs
    },
    data () {
        return {
            activeBtnId: 0,
            btns: [
                { id: 0, name: '基本信息' },
                { id: 1, name: '参数规格' },
                { id: 2, name: '装备展示' },
                { id: 3, name: '销售记录' },
                { id: 4, name: '装备评价' },
                { id: 5, name: '教学中心' },
                { id: 6, name: '产品论坛' }
            ],

            goodsInfo: {},

            //recProList: [],
            salesList: [],
            evaluateList: [],
            teachingVideoList: [],
        }
    },
    created () {

    },
    mounted () {
        this.getGoodsInfoData()
    },
    methods: {
        getGoodsInfoData(){
            let that = this
            getGoodsInfo({
                id: that.$route.params.id
            }).then(res => {
                if (res.code === 1){
                    that.goodsInfo = res.data
                } else {
                    that.$message.error(res.msg)
                }
            })
        },
        
    }
}
</script>

<style lang="less" scoped>
.hd-title {
    text-align: center;
    margin-top: 60px;

    h3 {
        font-size: 28px;
        font-weight: 700;
        color: #2E3033;
    }

    p {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);
        margin-top: 10px;
    }
}

/deep/.el-input__suffix {
    right: 0;
}

.orderBy {
    .el-button {
        border-color: transparent;

        &.el-button--danger:hover {
            color: #fff;
        }

        &:hover {
            color: #000;
            background-color: transparent;
        }
    }
}

.video-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 30px;
}
</style>